.image-list{overflow:hidden;margin-right:-2%}
.image-list .cover{position:relative;width:18%;margin:0 2% 20px 0;height:120px;display:inline-block;border:1px solid #e8e8e8;box-sizing:border-box;cursor:pointer}
.image-list .cover img{vertical-align:middle;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
.image-list .cover div{position:absolute;left:0;top:0;margin:0;z-index:9;line-height:20px;}
.image-list .cover div span{padding:0 5px;color:#ffffff;font-size:12px;display: inline-block;box-shadow: 0 1px 5px 0 rgba(0,0,0,.05);-moz-opacity: 0.8;opacity: 0.8;}
#pictureViewer{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.3);z-index:10000}
#pictureViewer>.content{background-color:#fff;position:absolute;width:590px;height:590px;margin:auto;top:0;right:0;bottom:0;left:0}
#pictureViewer .menu-bar{padding:10px 0 0 0;width:100%}
#pictureViewer .menu-bar .handel{width:30px;height:30px;line-height:30px;text-align:center;float:right;cursor:pointer;color:#f2f4f5;border-radius:3px;margin-right:10px;background-color:#cccccc;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
#pictureViewer .menu-bar .handel i{font-size:14px}
#pictureViewer .menu-bar .handel:hover{background-color:rgba(0, 0, 0, 0.15);}
#pictureViewer .handel-next,#pictureViewer .handel-prev{display:inline-block;width:36px;height:60px;line-height:60px;color:rgba(0, 0, 0, 0.2);position:relative;top:calc(50% - 70px);text-align:center;cursor:pointer;z-index:10009;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
#pictureViewer .handel-next,#pictureViewer .handel-prev,#pictureViewer .menu-bar .handel{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;-webkit-touch-callout:none}
#pictureViewer .handel-next i,#pictureViewer .handel-prev i{font-size:20px}
#pictureViewer .handel-next:hover,#pictureViewer .handel-prev:hover{background-color:rgba(0, 0, 0, 0.2);color:rgba(255, 255, 255, 0.7)}
#pictureViewer .picture-content{display:inline-block;width:80%;height:calc(100% - 80px);position:absolute;margin:0 auto;left:0;right:0}
#pictureViewer .picture-content .cover{position:absolute;margin:auto;top:0;right:0;bottom:0;left:0}
#pictureViewer .counter{position:absolute;bottom:0;height:40px;line-height:40px;width:100%;text-align:center;color:#999;font-size:13px}
#pictureViewer .hide{display:none}
#pictureViewer .left{float:left}
#pictureViewer .right{float:right}
#pictureViewer .clear-flex{clear:both}
#pictureViewer img{max-width:100%;max-height:100%}
@media screen and (max-width:720px){.image-list{margin-right:-2%}
.image-list .cover{width:23%;}
#pictureViewer>.content{width:400px;height:400px}
#pictureViewer .handel-next i,#pictureViewer .handel-prev i{font-size:18px}
#pictureViewer .picture-content{width:100%}
}
@media screen and (max-width:480px){.image-list{margin-right:-3%}
.image-list .cover{width:47%;margin-right:3%;}
#pictureViewer>.content{width:100%;height:360px}
}